<template>
  <div>
    <Header />
    <div class="MainContent">
      <div class="MainContent-Header">
        <h1 class="MainContent-text">大家都在追</h1>
        <div class="change" @click="changeupdata">
          <svg aria-hidden="true" class="icons">
            <use xlink:href="#icon-shuaxin"></use>
          </svg>
          换一换
        </div>
      </div>
      <div class="MainContent-main">
        <div class="MainContent-main-top" v-loading="loading">
          <div
            class="MainContent-main-topImage"
            v-for="(ve, index) in VideoList"
            :key="ve.id"
            v-show="!isShow"
            @click="Videogo(ve.id)"
          >
            <!-- <router-link to="/playvideo"> -->
            <img
              v-lazy="ve.cover"
              v-if="index !== currentIndex"
              @mouseenter="goenter(ve.id, index)"
              @mouseleave="leavego"
            />
            <video
              :src="Url"
              v-else="index === currentIndex"
              autoplay
              muted
              style="width: 169.5px; height: 279.906px"
              @mouseleave="goleave"
            ></video>
            <div class="MainContent-main-info">
              <h5 class="info-title">{{ ve.artistName }}</h5>
              <div class="info-content">
                播放6.5亿<i class="i"></i>更新至第125集
              </div>
            </div>
            <!-- </router-link> -->
          </div>
          <div
            class="MainContent-main-topImage"
            v-for="newAblumn in newAblumnList"
            :key="newAblumn.id"
            v-show="isShow"
          >
            <img v-lazy="newAblumn.picUrl" />
            <div class="MainContent-main-info">
              <h5 class="info-title">{{ newAblumn.name }}</h5>
              <div class="info-content">
                播放6.5亿<i class="i"></i>更新至第125集
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="MainContent-Second">
        <h1 class="MainContent-text">热门榜单</h1>
        <div
          class="MainContent-text-hot"
          :class="!hotShow ? 'show' : ''"
          @click="dayHot"
          ref="dayHotRef"
        >
          今日最热
        </div>
        <div
          class="MainContent-text-bikan"
          @click="bikanShow"
          :class="hotShow ? 'show' : ''"
        >
          必看TOP50
        </div>
        <div class="page">
          <span class="main-content-shuzi">{{ num }}/2</span>
        </div>
      </div>
      <div class="outSwiperBox" v-if="InfoShow">
        <swiper
          :modules="modules"
          :slides-per-view="8"
          :space-between="50"
          navigation
          :slidesPerGroup="8"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
          class="inSwiperBox"
        >
          <swiper-slide v-for="rec in RecommendList" :key="rec.id">
            <img v-lazy="rec.picUrl" />
          </swiper-slide>
        </swiper>
      </div>
      <div class="outSwiperBox" v-else v-loading="going">
        <swiper
          :modules="modules"
          :slides-per-view="8"
          :space-between="50"
          navigation
          :slidesPerGroup="8"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
          class="inSwiperBox"
        >
          <swiper-slide v-for="rectwo in RecommendListTwo" :key="rectwo.id">
            <img v-lazy="rectwo.picUrl" />
          </swiper-slide>
        </swiper>
      </div>
      <div class="MainContent-Header">
        <h1 class="MainContent-text">精彩剧情追不停</h1>
        <div class="change">
          更多
          <svg aria-hidden="true" class="icons">
            <use xlink:href="#icon-xiangyoujiantou"></use>
          </svg>
        </div>
      </div>
      <div class="MainContent-main">
        <div class="MainContent-main-top">
          <div
            class="MainContent-main-topImage"
            v-for="jingcai in NewSongList"
            :key="jingcai.id"
          >
            <img v-lazy="jingcai.picUrl" />
            <div class="MainContent-main-info">
              <h5 class="info-title">{{ jingcai.name }}</h5>
              <div class="info-content">
                播放6.5亿<i class="i"></i>更新至第125集
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="MainContent-Header">
        <h1 class="MainContent-text">总能在二次元世界被治愈</h1>
        <div class="change">
          更多
          <svg aria-hidden="true" class="icons">
            <use xlink:href="#icon-xiangyoujiantou"></use>
          </svg>
        </div>
      </div>
      <div class="MainContent-main">
        <div class="MainContent-main-top">
          <div
            class="MainContent-main-topImage"
            v-for="play in PlayList"
            :key="play.id"
          >
            <img v-lazy="play.coverImgUrl" />
            <div class="MainContent-main-info">
              <h5 class="info-title">{{ play.name }}</h5>
              <div class="info-content">
                播放6.5亿<i class="i"></i>更新至第125集
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="MainContent-Header">
        <h1 class="MainContent-text">万物可爱，人间值得</h1>
        <div class="change">
          更多
          <svg aria-hidden="true" class="icons">
            <use xlink:href="#icon-xiangyoujiantou"></use>
          </svg>
        </div>
      </div>
      <div class="MainContent-main">
        <div class="MainContent-main-top">
          <div
            class="MainContent-main-topImage"
            v-for="play in PlayList"
            :key="play.id"
          >
            <img v-lazy="play.creator.avatarUrl" />
            <div class="MainContent-main-info">
              <h5 class="info-title">{{ play.creator.signature }}</h5>
              <div class="info-content">
                播放6.5亿<i class="i"></i>更新至第125集
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Theater',
  components: {
    Swiper,
    SwiperSlide,
  },
})
</script>

<script lang="ts" setup>
import Header from '../../components/smallJcHeader/Header.vue'
import Footer from '@/components/footer/footer.vue'
import { ref, onMounted, computed } from 'vue'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import {
  Swiper,
  SwiperSlide,
} from '../../../node_modules/swiper/vue/swiper-vue.js'
import { ElLoading } from 'element-plus'
import '../../../node_modules/swiper/swiper-bundle.min.css'
import { AblumnListApi } from '../../api/Ablumn'
import { AblumnListModel } from '../../api/model/AblumnModel'
import { NewAblumnListApi } from '../../api/NewAblumn'
import { NewAblumnListSumModel } from '../../api/model/NewAblumnModel'
import { recommendListApi } from '@/api/recommend'
import { recommendSumListModel } from '@/api/model/recommendListModel'
import { TopFiveListApi } from '@/api/TopFive'
import { TopFiveListSumModel } from '@/api/model/TopFiveListModel'
import { NewsongListApi } from '@/api/NewSong'
import { NewSongListSumModel } from '@/api/model/NewSongListModel'
import { PlayListApi } from '@/api/PlayList'
import { PlayLisSumModel } from '@/api/model/PlaylistModel'
import { VideoListApi } from '@/api/VideoList'
import { VideoListSumModel } from '@/api/model/VideoListModel'
import { MvListApi } from '@/api/Mv'
import { useRouter } from 'vue-router'
import * as _ from 'lodash'
const router = useRouter()
const isShow = ref<boolean>(false)
const num = ref<number>(1)
const WeList = ref<AblumnListModel>([])
const newAblumnList = ref<NewAblumnListSumModel>([])
const hotShow = ref<boolean>(false)
const RecommendList = ref<recommendSumListModel>([])
const InfoShow = ref<boolean>(true)
const RecommendListTwo = ref<TopFiveListSumModel>([])
const NewSongList = ref<NewSongListSumModel>([])
const PlayList = ref<PlayLisSumModel>([])
const loading = ref<boolean>(false)
const going = ref<boolean>(false)
const VideoList = ref<VideoListSumModel>([])
const currentIndex = ref<number | null>(null)
const Url = ref('')
onMounted(async () => {
  const res = await AblumnListApi()
  WeList.value = res.products.slice(0, 8)
  const result = await recommendListApi()
  RecommendList.value = result.result.slice(0, 16)
  const sum = await NewsongListApi()
  NewSongList.value = sum.result.slice(0, 8)
  const play = await PlayListApi()
  PlayList.value = play.playlists.slice(0, 8)
  const Video = await VideoListApi(8, '内地')
  VideoList.value = Video.data
})
//点击换一换刷新再发次请求
const changeupdata = async () => {
  loading.value = true
  isShow.value = !isShow.value
  if (newAblumnList.value.length > 0) {
    loading.value = false
    return false
  }
  const res = await NewAblumnListApi()
  newAblumnList.value = res.albums.slice(0, 8)
  loading.value = false
}
const onSwiper = (swiper: any) => {
  console.log(swiper)
}
const onSlideChange = (Swiper: any) => {
  console.log(Swiper.snapIndex)
  if (Swiper.snapIndex === 0) {
    num.value = num.value - 1
  } else if (Swiper.snapIndex === 1) {
    num.value = num.value + 1
  }
}
const dayHotRef = ref<HTMLElement | null>(null)
const dayHot = (e: any) => {
  num.value = 1
  hotShow.value = !hotShow.value
  InfoShow.value = !InfoShow.value
}
const bikanShow = async () => {
  num.value = 1
  going.value = true
  hotShow.value = !hotShow.value
  InfoShow.value = !InfoShow.value
  if (RecommendListTwo.value.length > 0) {
    going.value = false
    return false
  }
  const res = await TopFiveListApi()
  RecommendListTwo.value = res.artists.slice(0, 16)
  going.value = false
}
const Videogo = (id: number) => {
  router.push({
    path: '/PlayjcVideo',
    query: {
      id,
    },
  })
}
const godebounce = async (id: number | null, index: number | null) => {
  currentIndex.value = index
  const result = await MvListApi(id)
  Url.value = result.data.url
}
const goenter = async (id: number, index: number) => {
  _debounce(id, index)
}
const goleave = () => {
  currentIndex.value = null
}
const leavego = () => {
  _debounce(-1, -1)
}
const _debounce = _.debounce(godebounce, 1000)
const modules = [Navigation, Pagination, Scrollbar, A11y]
</script>
<style lang="less">
.MainContent {
  // border: 1px solid red;
  width: 100%;
  margin-top: 130px;
  h1 {
    font-size: 1em;
    margin: 0.67em 0;
  }
  .outSwiperBox {
    width: 1484.06px;
    position: relative;
    margin: 0 auto;
    .inSwiperBox {
      height: 300px;
      position: initial;
      display: flex;
      justify-content: space-between;
      --swiper-navigation-size: 14px;
      --swiper-theme-color: none;
      .swiper-button-next {
        top: -31px;
        margin-right: 65px;
      }
      .swiper-button-next:hover {
        color: #fe3666;
      }
      .swiper-button-prev:hover {
        color: #fe3666;
      }
      .swiper-button-prev {
        top: -31px;
        margin-left: 1329px;
      }
      .swiper-slide {
        width: 140.5px !important;
        height: 279.906px;
        border-radius: 4px;
        display: flex;
        img {
          cursor: pointer;
          width: 140.5px !important;
          height: 250.906px;
          border-radius: 4px;
        }
        img:hover {
          transition: transform 1s;
          transform: scale(1.2);
        }
      }
    }
  }
  .MainContent-Header {
    width: 1484.06px;
    // border: 1px solid blue;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .MainContent-text {
      font-weight: bolder;
      color: #111;
    }
    .change {
      display: flex;
      align-items: center;
      font-size: 13px;
      cursor: pointer;
      color: #999;
      cursor: pointer;
    }
    .change:hover {
      color: #fe3666;
    }
  }
  .MainContent-main {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 1484.06px;
    margin: 0 auto;
    .elSkeleton {
      width: 169.5px;
      height: 279.906px;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
    }
    .MainContent-main-top {
      // border: 1px solid red;
      width: 1484.06px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      position: relative;
      .MainContent-main-topImage {
        a {
          text-decoration: none;
        }
        .router-link-active {
          text-decoration: none;
        }
        img {
          cursor: pointer;
          width: 169.5px;
          height: 279.906px;
          border-radius: 4px;
        }
        // 	img:hover {
        // transition:transform 1s;
        // transform: scale(1.1,1.1);
        // }
        video {
          width: 169.5px;
          height: 279.906px;
          border-radius: 4px;
          object-fit: fill;
          width: 100%;
          height: 100%;
        }

        .MainContent-main-info {
          display: flex;
          flex-direction: column;
          position: relative;
          font-family: PingFangSC, PingFangSC-Regular;
          .info-title {
            width: 100%;
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            color: #111;
            margin-bottom: 10px;
            margin-top: 10px;
            width: 100px;
          }
          .info-title:hover {
            color: #fe3666;
          }
          .info-content {
            font-size: 13px;
            color: #999;
            .i {
              display: inline-block;
              height: 9px;
              width: 1px;
              margin: 0 2px;
              background: #ccc;
            }
          }
        }
      }
    }
  }
  .MainContent-Second {
    width: 1484.06px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    .MainContent-text-hot {
      padding: 8px 19px;
      box-sizing: border-box;
      border-radius: 30px;
      font-size: 13px;
      line-height: 18px;
      margin-right: 24px;
      margin-left: 20px;
      cursor: pointer;
      background: #f8f8f8;
      color: #666;
    }
    .MainContent-text-bikan {
      padding: 8px 19px;
      box-sizing: border-box;
      border-radius: 30px;
      font-size: 13px;
      line-height: 18px;
      margin-right: 24px;
      cursor: pointer;
      background: #f8f8f8;
      color: #666;
    }
    .show {
      background: #fe3666;
      color: #fff;
    }
    .page {
      display: flex;
      margin-bottom: 18px;
      margin-left: 1026px;
      align-items: center;
      margin-left: 996px;
      .main-content-shuzi {
        margin-left: 40px;
        margin-right: 10px;
        font-size: 13px;
        color: #666;
      }
    }
  }
}
</style>
